﻿@page "/linear-gauge/default-functionalities"

@using Syncfusion.Blazor.LinearGauge
@using Newtonsoft.Json;

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates the default rendering of the linear gauge.</p>
</SampleDescription>
<ActionDescription>
   <p>This sample demonstrates the default linear gauge. The linear gauge component indicates the values of scales in horizontal
      or vertical sliding meter. You can use <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeAxes.html'>LinearGaugeAxes</a></code>,
      <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRanges.html'>LinearGaugeRanges</a></code>, <code><a target='_blank' class='code' 
      href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointers.html'>LinearGaugePointers</a></code> and <code><a target='_blank' class='code' 
      href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeContainer.html'>LinearGaugeContainer</a></code> properties to customize the appearance of the linear gauge.</p>
    <p>More information about the linear gauge can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/linear-gauge/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfLinearGauge Orientation="Orientation.Horizontal">
        <LinearGaugeAxes>
            <LinearGaugeAxis>
                <LinearGaugeAxisLabelStyle Offset="48"/>
                <LinearGaugeMajorTicks Color="#9E9E9E" Interval="10" Height="20"/>
                <LinearGaugeMinorTicks Color="#9E9E9E" Interval="2" Height="10"/>
                <LinearGaugeAnnotations>
                    <LinearGaugeAnnotation AxisIndex="0" AxisValue="10" X="10" Y="-70" ZIndex="1">
                        <ContentTemplate>
                            <div style='width:70px'><h1 style='font-size:14px; margin-left:-40px; margin-top: -2px'>10 MPH</h1></div>
                        </ContentTemplate>
                    </LinearGaugeAnnotation>
                </LinearGaugeAnnotations>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="10" Height="15" Width="15" Placement="Placement.Near" Offset="-50" MarkerType="MarkerType.Triangle"/>
                </LinearGaugePointers>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </SfLinearGauge>
</div>
